<template>
  <div>
    <el-form :inline="true" class="demo-form-inline pt10 text_nowrap" label-width="85px" label-position="right">
      <div class="w100 flex-cen">
        <!--                <el-form-item label="系统名称：">-->
        <!--                  <el-select :disabled="group !== 'tenancy'" size="small" v-model="searchData.system_id" placeholder="请选择" style="width:180px">-->
        <!--                    <el-option-->
        <!--                      v-for="item in systemsLiteList"-->
        <!--                      :key="item.id"-->
        <!--                      :label="item.name"-->
        <!--                      :value="item.id">-->
        <!--                    </el-option>-->
        <!--                  </el-select>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="机构名称：" label-width="120px">-->
        <!--                  <el-select :disabled="institutionsLiteList.length === 0" size="small" v-model="searchData.institution_id" placeholder="请选择" style="width:160px">-->
        <!--                    <el-option-->
        <!--                      v-for="item in institutionsLiteList"-->
        <!--                      :key="item.id"-->
        <!--                      :label="item.name"-->
        <!--                      :value="item.id">-->
        <!--                    </el-option>-->
        <!--                  </el-select>-->
        <!--                </el-form-item>-->
        <el-form-item label-width="85px" class="flex-cen">
          <div slot="label">
            <span style="margin-right: 28px">日</span>
            <span>期：</span>
          </div>
          <el-date-picker v-model="dateRange" type="daterange" size="small" style="width: 270px" align="right"
            unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
            @change="searchCondation" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="存档类型：" label-width="90px" class="flex-cen">
          <el-select v-model="searchData.service_type" size="small" class="fl" style="width:100px" @change="serviceTypeChanged">
            <el-option :value="0" label="存档13"></el-option>
            <el-option :value="1" label="存档15以上"></el-option>
          </el-select></el-form-item>
        <el-form-item class="ml20">
          <el-button type="primary" class="mr10" size="medium" @click="searchCondation">查询</el-button>
          <!-- <el-button type="primary" class="ml0" plain size="medium" @click="resetCondation">重置</el-button> -->
          <el-button type="primary" size="medium" @click="downloadInfo">下载</el-button>
        </el-form-item>
      </div>
      <div class="w100 flex-cen">
        <el-form-item label="日志等级：" class="flex-cen">
          <ul class="logLevel">
            <li :class="{ active: searchData.log_mode === '-1' }" @click="chooseLogMode('-1')">全部</li>
            <li :class="{ active: searchData.log_mode === '0' }" @click="chooseLogMode('0')">致命</li>
            <li :class="{ active: searchData.log_mode === '1' }" @click="chooseLogMode('1')">错误</li>
            <li :class="{ active: searchData.log_mode === '2' }" @click="chooseLogMode('2')">警告</li>
            <li :class="{ active: searchData.log_mode === '3' }" @click="chooseLogMode('3')">过程</li>
            <li :class="{ active: searchData.log_mode === '4' }" @click="chooseLogMode('4')">调试</li>
            <li :class="{ active: searchData.log_mode === '5' }" @click="chooseLogMode('5')">跟踪</li>
          </ul>
          <el-input @keyup.enter.native="searchCondation" size="small" placeholder="请输入检索内容"
            style="width:270px;margin-left: 14px;margin-top: 4px;" v-model="searchData.filter" clearable>
          </el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      searchData: {
        // system_id: '',
        // institution_id: '',
        log_mode: '-1',
        filter: '',
        start_date_time: '',
        end_date_time: '',
        service_type:1,
      },
      dateRange: [], // 日期
      institutionsLiteList: [],// 机构名称
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  props: ['institutionList', 'systemsLiteList'],
  mounted() {
    // 这里要改成 this.group
    // if(this.group === 'dept') { // 科室角色
    //   this.searchData.system_id = this.systemid
    // }
    this.setDate()
    this.searchCondation()
  },
  computed: {
    ...mapGetters(['group', 'systemid'])
  },
  watch: {
    dateRange(newVal) {
      // console.log(newVal)
    },
    // 'searchData.system_id':  {
    //   handler: function (newVal) {
    //     if(newVal) {
    //       this.institutionsLiteList = []
    //       this.searchData.institution_id = ''
    //       this.getInstitutionsLiteList(newVal)
    //     }
    //   },
    //   immediate: true
    // }
  },
  methods: {
    setDate() {
      const today = new Date()
      const todayMonth = today.getMonth() + 1 > 9 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1)
      const todayDay = today.getDate() > 9 ? today.getDate() : '0' + today.getDate()
      const todayDate = `${today.getFullYear()}-${todayMonth}-${todayDay}`
      this.dateRange = [todayDate, todayDate]
    },
    searchCondation() { // 搜索
      this.searchData.start_date_time = this.dateRange[0]
      this.searchData.end_date_time = this.dateRange[1]
      this.$emit('searchFn', this.searchData)
    },
    serviceTypeChanged(){
      this.searchCondation()
    },
    // 日志下载
    downloadInfo() {
      if (this.dateRange) {
        this.$emit('downloadFn', this.dateRange[0]);
      } else {
        this.$message.warning('请选择时间');
      }
    },
    resetCondation() { // 重置
      // if(this.group === 'tenancy') {
      //   this.searchData.system_id = ''
      //   this.searchData.institution_id = ''
      //   this.institutionsLiteList = []
      // }else if(this.group === 'dept') {
      //   this.searchData.institution_id = ''
      // }
      this.setDate()
      this.searchData.log_mode = '-1'
      this.searchData.filter = ''
    },
    systemNameChange(val) {
      this.getInstitutionsLiteList(val)
      this.institutionsLiteList = []
      this.searchData.institution_id = ''
    },
    async getInstitutionsLiteList(val) {
      if (val) {
        let res = await this.$pacsApi.pacsApi.getInstitutionsLiteList({ system_id: val })
        let { code, data } = res
        if (code === 0) {
          this.institutionsLiteList = data
        }
      }
    },
    chooseLogMode(log_mode) {
      this.searchData.log_mode = log_mode
      this.searchCondation();
    }
  }
}
</script>
<style lang="less" scoped>
.flex-cen {
  display: flex;
  align-items: center;
}

.el-form-item {
  margin-bottom: 5px;
}

.el-form--inline .el-form-item {
  margin-right: 0;
}

/deep/.el-form-item__label {
  padding-right: 0;
}

.logLevel {
  li {
    float: left;
    margin-right: 8px;
    color: #333;
    width: 70px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #dcdfe6;
    margin-top: 4px;
    box-sizing: border-box;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    &:hover {
      border: 1px solid #c0c4cc;
      cursor: pointer;
    }

    &.active {
      color: #0a70b0;
      border: 1px solid #0a70b0;
    }
  }

}
</style>
